import {View, Text, StyleSheet} from 'react-native'
import React, {Component} from 'react'
import FastImage, {FastImageProperties} from "react-native-fast-image";
import {createImageProgress} from 'react-native-image-progress';
import Progress from 'react-native-progress/Bar';

const Image: FastImage | any = createImageProgress(FastImage);

interface FastImageCustomProps extends FastImageProperties {

}

interface FastImageCustomState {
    isError: boolean
}


export default class FastImageCustom extends Component<FastImageCustomProps, FastImageCustomState> {

    image: FastImage;
    state = {
        isError:false
    };

    constructor(props: FastImageCustomProps) {
        super(props);
    }

    onLoadError = () => {
        this.setState({
            isError: true
        })
    };

    render() {
        const props = this.props;
        const {isError} = this.state;
        if (isError) {
            return <FastImage source={require("../../assets/img/loadError.png")} resizeMode={"center"} style={props.style}/>
        }
        return (<Image ref={image => this.image = image} indicator={Progress}
                       threshold={600}
                       onError={this.onLoadError}
                       resizeMode={FastImage.resizeMode.contain}
                       indicatorProps={{
                           size: 80,
                           borderWidth: 0,
                           color: 'rgba(150, 150, 150, 1)',
                           unfilledColor: 'rgba(200, 200, 200, 0.2)'
                       }}  {...props}/>)
    }
}

const FastImageCustomStyle = StyleSheet.create({
    container: {}
});

 